<template>
	<view class="base-info-wrapper">
		<custom-header-bar bg="1" :backStatus="backStatus" title="完善信息"></custom-header-bar>
		<div class="tabs-list">
			<div class="tab-item" :class="{ active: index === step }" v-for="(item, index) in tabList" :key="item.name"
				@click="handleClickTab(index)">
				{{ item.name }}
			</div>
		</div>
		<div class="content-box">
			<div class="inner-box" v-if="step === 0">
				<u--form class="form-wrapper" labelPosition="left" labelAlign="left" :labelStyle="labelStyle"
					labelWidth="180" :model="userInfo" :rules="rulesUserinfo" ref="formUserInfo">
					<u-form-item required label="手机号码:" prop="uphone" borderBottom>
						<u--input placeholder="请输入手机号" disabled v-model="userInfo.uphone" border="none"></u--input>
					</u-form-item>
					<u-form-item label="证件号码:" labelWidth="150" prop="card" borderBottom>
						<u--input disabled placeholder="请点击图标识别身份证信息" v-model="userInfo.card" border="none"
							@click="handleDistinguishCard"></u--input>
						<u-icon slot="right" color="#999999" size="40" name="camera" @click="handleDistinguishCard">
						</u-icon>
					</u-form-item>
					<u-form-item required label="姓名:" prop="uname" borderBottom>
						<u--input placeholder="请输入" v-model="userInfo.uname" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="出生日期:" prop="birthData" borderBottom>
						<u--input disabled placeholder="请识别" v-model="userInfo.birthData" border="none"></u--input>
					</u-form-item>
					<u-form-item required label="年龄:" prop="age" borderBottom>
						<u--input placeholder="请输入" v-model="userInfo.age" border="none"></u--input>
					</u-form-item>
					<u-form-item @click="showSex = true" required label="性别:" prop="sex" borderBottom ref="item1">
						<u--input v-model="userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item required label="身高:" prop="height" borderBottom>
						<u--input type="number" placeholder="请输入身高(厘米)" v-model="userInfo.height" border="none">
						</u--input>
					</u-form-item>
					<u-form-item required label="体重:" prop="weight" borderBottom>
						<u--input type="number" placeholder="请输入体重(KG)" v-model="userInfo.weight" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="籍贯:" prop="address" borderBottom>
						<u--input disabled placeholder="请识别" v-model="userInfo.address" border="none"></u--input>
					</u-form-item>
					<u-form-item required label="上传头像:" prop="avatar" borderBottom>
						<u-upload :fileList="avatarFile" @afterRead="afterRead($event, 0)" @delete="deletePic"
							name="avatar" :maxCount="1"></u-upload>
					</u-form-item>
					<u-form-item required label="健康顾问:" prop="healthAdvisorName" borderBottom>
						<u--input placeholder="请输入健康顾问姓名" v-model="userInfo.healthAdvisorName" border="none"></u--input>
					</u-form-item>
				</u--form>
				<button class="button" @click="stepOperate('1')">下一步</button>
			</div>
			<div class="inner-box" v-if="step === 1">
				<u--form class="form-wrapper" labelPosition="left" labelAlign="left" :labelStyle="labelStyle"
					labelWidth="180" :model="hospital" ref="formHospital">
					<u-form-item required label="最近就医:" prop="medicalId" borderBottom>
						<div @click="handleShowPicker({ list: 'medicalDatelist', key: 'medicalId' })"
							style="width: 100%">
							<u--input placeholder="请选择" :value="medicalId" border="none" readonly></u--input>
						</div>
						<u-icon color="#999999" size="28" slot="right" name="arrow-down"></u-icon>
					</u-form-item>
					<u-form-item required label="就医原因:" prop="medicalReasonsId" borderBottom>
						<div @click="handleShowPicker({list: 'medicalReasonslist',key: 'medicalReasonsId',})"
							style="width: 100%">
							<u--input placeholder="请选择" readonly :value="medicalReasonsId" border="none"></u--input>
						</div>
						<u-icon color="#999999" size="28" slot="right" name="arrow-down"></u-icon>
					</u-form-item>
					<u-form-item label="最近服用药:" prop="recentMedication" borderBottom>
						<u--input placeholder="请输入" v-model="hospital.recentMedication" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="服药频率:" prop="drugFrequencyId" borderBottom>
						<div @click="handleShowPicker({list: 'drugFrequencylist',key: 'drugFrequencyId',})"
							style="width: 100%">
							<u--input disabled placeholder="请选择" :value="drugFrequencyId" border="none">
							</u--input>
						</div>
						<u-icon color="#999999" size="28" slot="right" name="arrow-down"></u-icon>
					</u-form-item>
					<div class="tag">常用药物</div>
					<u-form-item label="过敏史:" prop="allergicHistory" borderBottom>
						<u--input placeholder="请输入" v-model="hospital.allergicHistory" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="药物类别:" prop="drugCategoryId" borderBottom>
						<div @click=" handleShowPicker({list: 'drugCategorylist',key: 'drugCategoryId',})"
							style="width: 100%">
							<u--input disabled placeholder="请选择" :value="drugCategoryId" border="none"></u--input>
						</div>
						<u-icon color="#999999" size="28" slot="right" name="arrow-down"></u-icon>
					</u-form-item>
					<u-form-item label=" " prop="drugName" borderBottom>
						<u--input placeholder="请输入药物具体名称" v-model="hospital.drugName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="上传照片:" prop="age" :borderBottom="false" class="drugs-item">
						<u-upload :fileList="drugsFile" @afterRead="afterRead($event, 1)" @delete="deletePic"
							name="drugs" :maxCount="100"></u-upload>
					</u-form-item>
					<div class="drugs-tips">请上传药物包装照片</div>
				</u--form>
				<button class="button" @click="stepOperate('2')">下一步</button>
			</div>
			<div class="inner-box" v-if="step === 2">
				<u--form class="form-wrapper" labelPosition="left" labelAlign="left" :labelStyle="labelStyle"
					labelWidth="160" :model="contact" :rules="rulesContact" ref="formContact">
					<u-form-item required label="姓名:" prop="relativesName" borderBottom>
						<u--input placeholder="请输入姓名" v-model="contact.relativesName" border="none"></u--input>
					</u-form-item>
					<u-form-item required label="手机号码:" prop="relativesPhone" borderBottom>
						<u--input placeholder="请输入手机号码" v-model="contact.relativesPhone" border="none"></u--input>
					</u-form-item>
					<u-form-item :borderBottom="false" required label="关系:" prop="relationshipId">
						<div @click="handleShowPicker({list: 'relationshiplist',key: 'relationshipId',})"
							style="width: 100%">
							<u--input disabled placeholder="请选择" :value="relationshipId" border="none"></u--input>
						</div>
						<u-icon color="#999999" size="28" slot="right" name="arrow-down"></u-icon>
					</u-form-item>
				</u--form>
				<button class="button" @click="stepOperate('3')">提交</button>
			</div>
		</div>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-picker v-if="showPicker" show :columns="pickerList" :singleIndex="singleIndex" keyName="name"
			closeOnClickOverlay @close="showPicker = false" @cancel="handleCancle" confirmColor="#33CCAC"
			@confirm="handleConfirm($event)"></u-picker>
		<u-popup :round="10" mode="center" :show="successTip">
			<view class="success-tip">
				<image class="icon" src="/static/icon-success.png" mode="aspectFit"></image>
				<div class="title">提交成功</div>
				<div class="popup-bottom">
					<button class="button home" @click="switchTab('/pages/index/index')">
						返回首页
					</button>
					<button class="button person" @click="switchTab('/pages/my/my')">
						个人中心
					</button>
				</div>
			</view>
		</u-popup>
		<u-loading-page bg-color="rgba(0,0,0,0.3)" loadingText="识别中" :loading="cardLoading"></u-loading-page>
	</view>
</template>

<script>
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import storage from "@/utils/storage.js"
	import {
		mapMutations,
		mapActions
	} from "vuex"
	import {
		PerfectInfo
	} from "@/api/login.js";
	import {
		medicalFastdfs,
		drugCategorylist,
		medicalDatelist,
		medicalReasonslist,
		drugFrequencylist,
		relationshiplist,
		deleteMedicalFastdfs,
		distinguish,
		getUploadToken,
	} from "@/api/info.js";
	import {
		BASE_URL
	} from "@/utils/config.js";
	export default {
		components: {
			CustomHeaderBar,
		},
		data() {
			return {
				showSex: false,
				backStatus: '1',
				step: 0,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				tabList: [{
						name: "基本信息",
					},
					{
						name: "就医状况",
					},
					{
						name: "紧急联系人",
					},
				],
				labelStyle: {
					fontSize: "28upx",
					color: "#000000D9",
				},
				// fastdfs_id: '', //  '图片唯一id',
				// fastdfs_type: '', //  '0是头像地址1是就医状况',
				userInfo: {
					uphone: "", // '电话',
					card: "", // '身份证',
					uname: "", // '用户昵称',
					birthData: "", // '出生日期',
					age: "", //'年龄',
					sex: "", // '性别（0男 1女 2未知）',
					height: "", //  '身高',
					weight: "", //  '体重',
					address: "", // '籍贯',
					avatar: "", // '头像'
					healthAdvisorName: "", // 健康顾问
				},
				rulesUserinfo: {
					phone: [{
						required: true,
						message: "请输入手机号码",
						trigger: ["blur", "change"],
					}, ], // '电话',
					uname: [{
						required: true,
						message: "请输入姓名",
						trigger: ["blur", "change"],
					}, ], // '用户昵称',
					age: [{
							required: true,
							message: "请输入年龄",
							trigger: ["blur", "change"],
						},
						{
							pattern: /^[1-9]\d*$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: "年龄格式不正确",
							trigger: ["blur", "change"],
						},
					], //  '身高',
					sex: [{
						required: true,
						message: "请选择性别",
						trigger: ["blur", "change"],
					}], //  '身高',
					height: [{
							required: true,
							message: "请输入身高",
							trigger: ["blur", "change"],
						},
						{
							pattern: /^[1-9]\d*$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: "身高格式不正确",
							trigger: ["blur", "change"],
						},
					], //  '身高',
					weight: [{
							required: true,
							message: "请输入体重",
							trigger: ["blur", "change"],
						},
						{
							pattern: /^[1-9]\d*$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: "体重格式不正确",
							trigger: ["blur", "change"],
						},
					], //  '体重',
					healthAdvisorName: [{
						required: true,
						message: "请输入健康顾问姓名",
						trigger: ["blur", "change"],
					}], // '头像'
				},
				hospital: {
					medicalId: "", //  '最近就医id',
					medicalReasonsId: "", //  '医疗原因',
					recentMedication: "", //  '近期用药',
					drugFrequencyId: "", //  '药物频率id',
					allergicHistory: "", // 过敏史
					drugCategoryId: "", //  '药物类别_id',
					drugCategoryId: "", //  '药物名称',
					photo: [], // '图片'
				},
				contact: {
					relativesName: "", // '用户昵称',
					relativesPhone: "", // '电话',
					relationshipId: "", //  '关系id',
				},
				rulesContact: {
					relativesName: [{
						required: true,
						message: "请输入姓名",
						trigger: ["blur", "change"],
					}, ], // '用户昵称',
					relativesPhone: [{
							required: true,
							message: "请输入手机号码",
							trigger: ["blur", "change"],
						},
						{
							pattern: /^0?(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: "手机号码格式不正确",
							trigger: ["blur", "change"],
						},
					], // '电话',
				},
				successTip: false,
				avatarFile: [],
				drugsFile: [],
				showPicker: false,
				selectInfo: {},
				pickerList: [],
				drugCategorylist: [],
				medicalDatelist: [],
				medicalReasonslist: [],
				drugFrequencylist: [],
				drugCategorylist: [],
				relationshiplist: [],
				medicalId: "",
				medicalReasonsId: "",
				drugFrequencyId: "",
				drugCategoryId: "",
				relationshipId: "",
				singleIndex: 0,
				cardLoading: false
			};
		},
		created() {
			this.getMedicalDatelist(); // 就医时间
			this.getMedicalReasonslist(); // 就医原因
			this.getDrugFrequencylist(); // 药物频率
			this.getDrugCategorylist(); // 药物类别
			this.getRelationshiplist(); // 用户关系
		},
		onLoad(options) {
			this.userInfo.uphone = options.phone;
			if (options.back === '0') {
				this.backStatus = '0'
			}
		},
		methods: {
			...mapMutations(["SetUserInfo"]),
			...mapActions(["ActionUserList"]),
			sexSelect(e) {
				this.userInfo.sex = e.name
				this.$refs.formUserInfo.validateField('sex')
			},
			handleClickTab(index) {
				if (this.step === 0) {
					this.$refs.formUserInfo.validate().then((res) => {
						this.step = index
					})
				}
				if (this.step === 1) {
					this.step = index
				}
				if (this.step === 2) {
					this.$refs.formContact.validate().then((res) => {
						this.step = index
					})
				}
			},
			// tab切换
			handleChangeTabs(e) {
				this.step = e.index;
			},
			// picker取消
			handleCancle() {
				this.showPicker = false;
			},
			// picker确定
			handleConfirm(e) {
				console.log(this.selectInfo);
				this[this.selectInfo.key] = e.value[0].name;
				if (this.selectInfo.key === "relationshipId") {
					this.contact[this.selectInfo.key] = e.value[0].id;
					this.contact.relationshipName = e.value[0].name;
				} else {
					this.hospital[this.selectInfo.key] = e.value[0].id;
				}
				this.showPicker = false;
			},
			// picker显示 获取展示数据
			handleShowPicker(info) {
				this.pickerList = [];
				this.selectInfo = info;
				this.pickerList.push(this[info.list]);
				this.$nextTick(() => {
					// this.singleIndex = 0
					this.showPicker = true;
				});
			},

			// 下一步
			stepOperate(index) {
				let that = this;
				if (index === "1") {
					this.$refs.formUserInfo.validate().then((res) => {
						that.step = 1;
						console.log(this.userInfo);
					})
				}
				if (index === "2") {
					that.step = 2;
				}
				if (index === "3") {
					if (this.avatarFile.length === 0) {
						uni.$u.toast("请上传头像");
						this.step = 0
						return;
					}
					if (!this.userInfo.healthAdvisorName) {
						uni.$u.toast("请输入健康顾问姓名");
						this.step = 0
						return;
					}
					if (!this.hospital.medicalId) {
						uni.$u.toast("请选择最近就医");
						this.$refs.formContact.clearValidate()
						setTimeout(() => {
							this.step = 1
						}, 300)
						return;
					}
					if (!this.hospital.medicalReasonsId) {
						uni.$u.toast("请选择就医原因");
						this.$refs.formContact.clearValidate()
						setTimeout(() => {
							this.step = 1
						}, 300)
						return;
					}
					this.userInfo.avatar = this.avatarFile[0].url
					this.$refs.formContact.validate().then((res) => {
						console.log(this.contact);
						if (!this.contact.relationshipId) {
							uni.$u.toast("请选择亲属关系");
							return;
						}
						if (this.userInfo.sex === '男') {
							this.userInfo.sex = '0'
						} else {
							this.userInfo.sex = '1'
						}
						PerfectInfo({
							...this.userInfo,
							...this.hospital,
							...this.contact,

						}).then((res) => {
							if (res.data.code === 200) {
								uni.$emit("LOGIN");
								let info = res.data.data
								that.ActionUserList({
									type: "login",
									...info
								})
								this.successTip = true;
							} else {
								uni.$u.toast(res.data.msg);
							}
						});
					});
				}
			},
			// 删除图片
			deletePic(event) {
				console.log(event);
				deleteMedicalFastdfs({
					fastdfsId: event.file.id,
				}).then((res) => {
					this[`${event.name}File`].splice(event.index, 1);
				});
			},
			// 新增图片
			async afterRead(event, type) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				console.log(event);
				let fileListLen = this[`${event.name}File`].length;
				lists.map((item) => {
					this[`${event.name}File`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadImgUrl(lists[i].url, type);
					// const result = await this.uploadImgUrl(type);
					let item = this[`${event.name}File`][fileListLen];
					this[`${event.name}File`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result.fastdfsUrl,
							id: result.fastdfsId,
						})
					);
					fileListLen++;
				}
			},
			// 上传
			uploadImgUrl(file, type) {
				const that = this;
				return new Promise((resolve, reject) => {
					getUploadToken().then((response) => {
						uni.uploadFile({
							url: "https://upload-z1.qiniup.com",
							filePath: file,
							name: "file",
							formData: {
								key: "user/" + that.globalGetUuid(),
								token: response.data.data,
							},
							success: (res) => {
								res.data = JSON.parse(res.data);
								let url = "http://q.shaxiansong.com/" + res.data.key;
								res.data.url = url;
								const result = that.getImgKey(url, type);
								resolve(result);
							},
							fail: () => {},
						});
					});
				});
			},
			async getImgKey(url, type) {
				return new Promise((resolve, reject) => {
					let a = medicalFastdfs({
						fastdfsUrl: url,
						fastdfsType: type,
					}).then((res) => {
						resolve(res.data.data);
					});
				});
			},
			// 选择图片
			handleDistinguishCard() {
				let that = this;
				getUploadToken().then((response) => {
					if (response.data.code !== 200) return;
					uni.chooseImage({
						count: 1, //可以选择图片的张数
						sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
						//sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有
						success: function(res) {
							//只能选择一张图片
							let tempFilePaths = res.tempFilePaths[0];
							// 图片转 base64
							// that.getBase64(tempFilePaths)
							uni.uploadFile({
								url: "https://upload-z1.qiniup.com",
								filePath: tempFilePaths,
								name: "file",
								formData: {
									key: "card/" + that.globalGetUuid(),
									token: response.data.data,
								},
								success: (res) => {
									that.cardLoading = true
									res.data = JSON.parse(res.data);
									let url = "http://q.shaxiansong.com/" + res.data.key;
									that.distinguish(url);
								},
								fail: () => {
									this.cardLoading = false
								},
							});
						},
					});
				});
			},
			globalGetUuid() {
				let d = new Date().getTime();
				const uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
					/[xy]/g,
					function(c) {
						const r = (d + Math.random() * 16) % 16 | 0;
						d = Math.floor(d / 16);
						return (c == "x" ? r : (r & 0x7) | 0x8).toString(16);
					}
				);
				return uuid;
			},
			// 证件识别
			distinguish(url) {
				// 开始识别
				distinguish({
					fastdfsUrl: url,
				}).then((res) => {
					this.cardLoading = false
					if (res.data.code === 200) {
						const data = JSON.parse(res.data.data);
						console.log(data);
						this.userInfo.card = data.num;
						this.userInfo.uname = data.name;
						this.userInfo.birthData = data.birth;
						let age = this.GetAgeByBrithday(data.birth)
						this.userInfo.age = age + '';
						this.userInfo.address = data.address;
						this.userInfo.sex = data.sex;
					} else {
						uni.$u.toast(res.data.msg);
					}
				}).catch(err => {
					this.cardLoading = false
				})
			},
			// 转base64
			getBase64(imgUrl) {
				const that = this;
				window.URL = window.URL || window.webkitURL;
				var xhr = new XMLHttpRequest();
				let base64 = "";
				xhr.open("get", imgUrl, true);
				// 至关重要
				xhr.responseType = "blob";
				xhr.onload = function() {
					if (this.status == 200) {
						//得到一个blob对象
						var blob = this.response;
						console.log("blob", blob);
						// 至关重要
						let oFileReader = new FileReader();
						oFileReader.onloadend = function(e) {
							base64 = e.target.result;
							// base64 = base64.substring(base64.indexOf(",") + 1);
							that.distinguish(base64);
							console.log("方式一》》》》》》》》》", base64);
						};
						oFileReader.readAsDataURL(blob);
					}
				};
				xhr.send();
			},
			switchTab(url) {
				console.log(url);
				uni.switchTab({
					url,
				});
			},
			// 年月日格式
			parseDate(str) {
				if (str.match(/^\d{4}[\-\/\s+]\d{1,2}[\-\/\s+]\d{1,2}$/)) {
					return new Date(str.replace(/[\-\/\s+]/i, "/"));
				} else if (str.match(/^\d{8}$/)) {
					return new Date(
						str.substring(0, 4) +
						"/" +
						str.substring(4, 6) +
						"/" +
						str.substring(6)
					);
				} else {
					return "时间转换发生错误！";
				}
			},
			// 获取年龄
			GetAgeByBrithday(birthday) {
				var age = -1;
				var today = new Date();
				var todayYear = today.getFullYear();
				var todayMonth = today.getMonth() + 1;
				var todayDay = today.getDate();
				var birthday = this.parseDate(birthday);
				if (birthday != "时间转换发生错误！") {
					let birthdayYear = birthday.getFullYear();
					let birthdayMonth = birthday.getMonth();
					let birthdayDay = birthday.getDate();
					if (todayYear - birthdayYear < 0) {
						alert("出生日期选择错误!");
					} else {
						if (todayMonth * 1 - birthdayMonth * 1 < 0) {
							age = todayYear * 1 - birthdayYear * 1 - 1;
						} else {
							if (todayDay - birthdayDay >= 0) {
								//alert(thisDay+'-'+brithd+"_ddd");
								age = todayYear * 1 - birthdayYear * 1;
							} else {
								age = todayYear * 1 - birthdayYear * 1 - 1;
							}
						}
					}
					return age * 1;
				} else {
					return -1;
				}
			},
			// 就医时间
			getMedicalDatelist() {
				medicalDatelist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.medicalId;
							item.name = item.medicalName;
						});
						this.medicalDatelist = res.data.data;
					}
				});
			},
			// 就医原因
			getMedicalReasonslist() {
				medicalReasonslist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.medicalReasonsId;
							item.name = item.medicalReasonsName;
						});
						this.medicalReasonslist = res.data.data;
					}
				});
			},
			// 药物类别
			getDrugCategorylist() {
				drugCategorylist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.drugCategoryId;
							item.name = item.drugCategoryName;
						});
						res.data.data.unshift({
							name: '无',
							id: ''
						})
						this.drugCategorylist = res.data.data;
					}
				});
			},
			// 药物频率
			getDrugFrequencylist() {
				drugFrequencylist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.drugFrequencyId;
							item.name = item.drugFrequencyName;
						});
						res.data.data.unshift({
							name: '无',
							id: ''
						})
						this.drugFrequencylist = res.data.data;
					}
				});
			},
			// 用户关系
			getRelationshiplist() {
				relationshiplist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.relationshipId;
							item.name = item.relationshipName;
						});
						this.relationshiplist = res.data.data;
					}
				});
			},
			trim(val) {
				return val.replace(/\s+/g, "");
			},
		},
	};
</script>

<style lang="scss">
	/deep/ .u-input {
		background-color: transparent !important;
	}

	.base-info-wrapper {
		height: 100%;
		padding: 160upx 0upx 50upx;
		box-sizing: border-box;
		background-color: #f4f4f4;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;

		.tabs-list {
			display: flex;
			align-items: center;
			padding-left: 30upx;
			background-color: #ffffff;

			.tab-item {
				padding: 16upx 14upx;
				color: #666666;
				font-size: 34upx;
				margin-right: 20upx;

				&.active {
					color: #33ccac;
					border-bottom: 4upx solid #33ccac;
				}
			}
		}

		.content-box {
			flex: 1;
			padding: 24upx;
			box-sizing: border-box;

			.inner-box {
				height: 100%;
				background-color: #ffffff;
				border-radius: 24upx;
				padding: 24upx 36upx;
				overflow-y: auto;

				.tag {
					margin: 40upx 0;
					position: relative;
					left: -36upx;
					width: 230upx;
					height: 64upx;
					line-height: 64upx;
					background: #defff8;
					border-radius: 0px 0px 16upx 0px;
					color: #33ccac;
					font-weight: bold;
					font-size: 32upx;
					text-align: center;
				}

				.image {
					height: 44upx;
				}

				.arrow {
					height: 18upx;
				}

				display: flex;
				flex-direction: column;

				.form-wrapper {
					flex: 1;
				}

				.button {
					width: 100%;
					height: 88upx;
					line-height: 88upx;
					background: #61d7ca;
					border-radius: 10px 10px 10px 10px;
					opacity: 1;
					font-size: 34upx;
					color: #ffffff;
				}
			}
		}
	}

	.popup-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.success-tip {
		width: 416upx;
		box-sizing: border-box;
		padding: 40upx;
		text-align: center;

		.icon {
			width: 90upx;
			height: 90upx;
			vertical-align: middle;
		}

		.title {
			margin-top: 15upx;
			font-size: 32upx;
		}

		.sub-title {
			margin-top: 24upx;
			font-size: 26upx;
			color: rgba(102, 102, 102, 1);
		}

		.button {
			margin-top: 48upx;
			width: 160upx;
			height: 60upx;
			line-height: 60upx;
			background: linear-gradient(-36deg,
					rgba(114, 215, 204, 0.8),
					rgba(40, 207, 179, 0.8));
			border-radius: 4upx;
			color: #ffffff;
			font-size: 26upx;
			border-radius: 8upx;
		}

		.home {
			background: #ebedf0;
			color: #bfbebe;
		}
	}

	.drugs-tips {
		padding-left: 160upx;
		color: #f9d39b;
		padding-bottom: 10upx;
		border-bottom: 1px solid rgb(214, 215, 217);
	}
</style>
